<template>
	<view class="mt-12">
		<view v-for="(item,index) in list" :key="index" class="flex flex-ai-center ranking_box mb-12" :style="{backgroundColor:index < 3?'#B0A6A0':'#fff'}">
			<view class="number_box mr-5">
				<image v-if="index < 3" :src="localBgUrl + runkingImages[index]" class="pay_icon"></image>
				<view class="font-color-black text-center font-w-bold" v-else>{{index + 1}}</view>
			</view>
			<view class="user_box flex flex-ai-center mr-12">
				<image :src="$originOssUrl + item.listimg" class="photo"></image>
				<view class="font-color-black font-size-14 font-w-bold ml-8">{{item.name}}</view>
			</view>
			<view class="flex flex-dir-col liu_box">
				<w-tag name="流通:" :value="`${item.flux}份`"></w-tag>
				<view class="font-color-black font-size-10 mt-4">最低价:{{item.minprice}}</view>
			</view>
			<view class="shizhi_box flex flex-dir-col text-right">
				<view class="font-color-black font-size-12">市值</view>
				<view class="font-color-black font-size-12">{{item.market_value}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { localBgUrl } from "@/config/index.js"
	export default {
		name:"w-marketCapRanking",
		props:{
			list:{
				type:Array
			}
		},
		data() {
			return {
				localBgUrl,
				runkingImages:{
					0:'ranking_one.png',
					1:'ranking_two.png',
					2:'ranking_three.png',
				}
			};
		}
	}
</script>

<style lang="scss" scoped>
	.ranking_box {
		width: calc(100% - 24rpx);
		padding: 24rpx 16rpx 18rpx 8rpx;
		.number_box {
			width: 60rpx;
			.pay_icon {
				width: 60rpx;
				height: 60rpx;
			}
		}
		.user_box {
			width: calc(80rpx + 16rpx + 178rpx);
			.photo {
				min-width: 80rpx;
				max-width: 80rpx;
				height: 80rpx;
			}
		}
		.liu_box {
			width: 180rpx;
		}
		.shizhi_box {
			width: 100rpx;
		}
	}
	
</style>